<!DOCTYPE HTML>
<html lang="cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <%include("/common/header.html",{title:''}){}%>
  <title>数据配置</title>
  <style>

  </style>
</head>
<body>

<div class="x-nav" style="margin: 20px auto auto 15px;">
      <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
        <a href="javascript:">首页</a><span lay-separator="">/</span>
        <a><cite>用户监测数据</cite></a>
      </span>
  <a class="layui-btn layui-btn-primary layui-btn-small" style="margin: -5px 14px 0px 0px;float:right;"
     href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon layui-icon-refresh-3"></i>
  </a>
</div>
<div style="padding: 20px;">
  <div class="layui-row layui-col-space15">


    <div class="layui-col-sm12">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
          <table class="layui-table" lay-skin="line">
            <tbody>
            <tr>
              <td>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                  <legend id="namese"></legend>
                </fieldset>
                <div id="test13" class="demo-tree-more"></div>
              </td>
            </tr>
            </tbody>
          </table>

        </div>
        <div class="layui-col-md9">

          <div id="containers" style="height: 400px;width: 100%;"></div>

          <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
      </div>
    </div>


  </div>
</div>
<script type="text/javascript" src="js/homeecharts.js"></script>
<!-- 弹出编辑数据点 -->
<%include("/common/foot.html"){}%>
<script>

  function getUrlSearch(name) {
    // 未传参，返回空
    if (!name) return null;
    // 查询参数：先通过search取值，如果取不到就通过hash来取
    var after = window.location.search;
    after = after.substr(1) || window.location.hash.split('?')[1];
    // 地址栏URL没有查询参数，返回空
    if (!after) return null;
    // 如果查询参数中没有"name"，返回空
    if (after.indexOf(name) === -1) return null;

    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    // 当地址栏参数存在中文时，需要解码，不然会乱码
    var r = decodeURI(after).match(reg);
    // 如果url中"name"没有值，返回空
    if (!r) return null;

    return r[2];
  }
  //使用

  layui.use(['index', 'table', 'form', 'laydate', 'layedit', 'AjaxCommon', 'AliangLayui', 'tree'], function () {
    //无连接线风格
    var tree = layui.tree
      , layer = layui.layer
      , util = layui.util;
    var laydate = layui.laydate;
    var name = getUrlSearch('name');
    $("#namese").text(name)
    var dom = document.getElementById("containers");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    laydate.render({
      elem: '#test5'
      , type: 'datetime'
    });
    laydate.render({
      elem: '#test6'
      , type: 'datetime'
    });
    var table = layui.table;
    var findArea_url = "dataShow/gettree.jhtml";
    $.ajax({
      url: findArea_url,
      type: "POST",
      data: {userid:getUrlSearch('id')},
      success: function (ret) {
        // console.log(JSON.stringify(ret));
        var obj = [];
        if (ret) {
          obj = JSON.parse(JSON.stringify(ret).replace(/projectName/g, "title").replace(/departProjectData/g, "children").replace(/dataName/g,"title"));
        }
        //基本演示
        tree.render({
          elem: '#test13'
          , data: obj
          , showCheckbox: false  //是否显示复选框

          , id: 'demoId1'
          , onlyIconControl:false
          , showLine: true  //是否开启连接线
          , isJump: false //是否允许点击节点时弹出新窗口跳转
          , click: function (obj) {
            myChart.showLoading({
              text: 'loading',
              color: '#4cbbff',
              textColor: '#4cbbff',
              maskColor: 'rgb(255,255,255)',
            });
            $.ajax({
              url: "dataShow/ge.jhtml",
              type: "POST",
              dataType: 'json',
              data: {id: obj.data.id},
              success: function (ret) {
                // console.log(ret)
                var yp = null;
                var mkline=null;
                if (ret.ifse == 'co2') {
                  yp = {
                    min: 300,
                    splitNumber: 3,
                    splitLine: {
                      show: false
                    }
                  }
                    mkline=[{
                        yAxis: 950
                    }]
                } else if (ret.ifse == 'wd') {
                  yp = {
                    min: 15,
                    splitNumber: 3,
                    splitLine: {
                      show: false
                    }
                  }
                    mkline=[{
                        yAxis: 18
                    },{
                        yAxis: 24
                    }]
                } else if (ret.ifse == 'sd') {
                  yp = {
                    min: 10,
                    splitNumber: 3,
                    splitLine: {
                      show: false
                    }
                  }
                    mkline=[{
                        yAxis: 40,
                        lineStyle: {
                            color: 'green'
                        }
                    },{
                      yAxis: 60
                    }]
                } else if (ret.ifse == 'gzqd') {
                  yp = {
                    min: 0,
                    splitNumber: 10,
                    splitLine: {
                      show: false
                    }
                  }
                    mkline=[{
                        yAxis: 3
                    }]
                } else if (ret.ifse == 'aq') {
                  yp = {
                    min: 0,
                    splitNumber: 5,
                    splitLine: {
                      show: false
                    }
                  }
                    mkline=[{
                        yAxis: 6
                    }]
                } else if (ret.ifse == 'fs') {
                  yp = {
                    min: 0,
                    splitNumber: 6,
                    splitLine: {
                      show: false
                    }
                  }
                    mkline=[{
                        yAxis: 2
                    },{
                        yAxis: 5
                    }]
                } else {
                  yp = {
                    min: 0,
                    splitNumber: 6,
                    splitLine: {
                      show: false
                    }
                  }
                    mkline={
                        yAxis: 15
                    }
                }

                var de = [];
                for (var i = 0; i < ret.time.length; i++) {
                  //var newDate = new Date();
                  //newDate.setTime(ret.time[i] * 1000);
                  //alert(newDate)
                  de.push(timestampToTime(ret.time[i]))
                }
                myChart.hideLoading();
                // console.log(ret.time)
                //  console.log(ret, 1234343423423423423423);
                myChart.setOption(option = {
                  title: {
                    text: ret.title
                  },
                  tooltip: {
                    trigger: 'axis'
                  },
                  xAxis: {
                    data: de
                  },
                  yAxis: yp,

                  toolbox: {
                    left: 'center',
                    feature: {
                      dataZoom: {
                        yAxisIndex: 'none'
                      },
                      restore: {},
                      saveAsImage: {}
                    }
                  },

                  dataZoom: [{
                    startValue: '2014-06-01'
                  }, {
                    type: 'inside'
                  }],
                  visualMap: {
                    top: 10,
                    right: 10,
                    pieces: [{
                      gt: 0,
                      lte: 15,
                      color: '#096'
                    }, {
                      gt: 15,
                      lte: 30,
                      color: '#ffde33'
                    }, {
                      gt: 30,
                      lte: 40,
                      color: '#ff9933'
                    }, {
                      gt: 40,
                      lte: 60,
                      color: '#cc0033'
                    }, {
                      gt: 60,
                      lte: 70,
                      color: '#660099'
                    }, {
                      gt: 70,
                      color: '#7e0023'
                    }],
                    outOfRange: {
                      color: '#999'
                    }
                  },
                  series: {
                    name: ret.uity, type: 'line',
                    markPoint: {
                      data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                      ]
                    },
                    markLine: {
                      silent:true,
                      lineStyle:{
                        normal:{
                          // color:'#01fef9'
                        color:'#9611EE'

                        }
                      },
                      data: mkline
                    },
                    data: ret.data,
                  }
                });
                myChart.setOption(option);
                table.render({
                  elem: '#test'
                  , url: "dataShow/findAll.jhtml"
                  , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                  , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                  }]
                  , title: '数据表格'
                  , cols: [[
                    /*{field: 'id', title: '序号', fixed: 'left', unresize: true, sort: true}*/
                    {
                      field: 'acquisitiontime',
                      templet: "<div>{{layui.util.toDateString(d.acquisitiontime, 'yyyy-MM-dd HH:mm:ss')}}</div>",
                      title: '时间',
                      edit: 'text'
                    }
                    , {field: 'data', title: '值', edit: 'text'}
                    , {field: 'com', title: '通道号', edit: 'text'}
                  ]]
                  , page: true
                  , where: {id: obj.data.id}
                });
              },
              error: function (jqXHR, textStatus, errorThrown) {
               /* layer.open({
                  title: "错误信息",
                  type: 2,
                  content: "没有查询到数据",
                  btn: ['关闭'] //可以无限个按钮
                });*/
              }
            });

          }
        });


      },
      error: function (jqXHR, textStatus, errorThrown) {
       /* layer.open({
          title: "错误信息",
          type: 2,
          content: "没有查询到数据",
          btn: ['关闭'] //可以无限个按钮
        });*/
      }
    });


    //头工具栏事件
    table.on('toolbar(test)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case 'getCheckData':
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
          break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了：' + data.length + ' 个');
          break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选' : '未全选');
          break;

        //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮');
          break;
      }

    });

    //监听行工具事件
    table.on('tool(test)', function (obj) {
      var data = obj.data;
      //console.log(obj)
      if (obj.event === 'del') {
        layer.confirm('真的删除行么', function (index) {
          obj.del();
          layer.close(index);
        });
      } else if (obj.event === 'edit') {
        layer.prompt({
          formType: 2
          , value: data.email
        }, function (value, index) {
          obj.update({
            email: value
          });
          layer.close(index);
        });
      }
    });

  });

  function timestampToTime(timestamp) {
    var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = date.getDate() + ' ';
    var h = date.getHours() + ':';
    var m = date.getMinutes() + ':';
    var s = date.getSeconds();
    return Y + M + D + h + m + s;
  }
</script>

</body>

</html>
